<template>
    <!-- 普通在线地址 -->
    <a v-if="isExternalLink" :href="href.replace('#/','')" v-bind="$attrs" >
        <slot></slot>
    </a>
    <!-- 导航跳转 -->
    <a v-else :href="href"  v-bind="$attrs" :class="{active:isActive,exactActive:isExactActive}">
        <slot></slot>
    </a>
</template>

<script>
import { RouterLink, useLink } from 'vue-router'
import { computed } from 'vue'

export default {
    name: 'NavLink',

    // 组件需要接收的属性(选项式)
    props: {
        // 如果使用 TypeScript，请添加 @ts-ignore
        ...RouterLink.props,  // NavLink接收的属性和router-link保持一致
        inactiveClass: String,  
    },

    // 选项式接收数据  props -> 传递到组合式写法中
    setup(props) {
        // useLink()   => 得到与router-link v-slot API 相同的访问属性 (组合式的写法)
        const { route, href, isActive, isExactActive, navigate } = useLink(props)

        // 判断是否是在线地址  https://www.baidu.com
        const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http')
        )

        return { isExternalLink, href, navigate, isActive,isExactActive }
    },
}

</script>

<style lang="scss" scoped></style>